<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Manage | 缓存监控</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Pace -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/plugins/pace-master/themes/blue/pace-theme-flash.css">
    <script type="text/javascript" src="../../plugins/AdminLTE/plugins/pace-master/pace.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/dist/css/ionicons.min.css">
    <!-- bootstrap table -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/plugins/bootstrap-table/bootstrap-table.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/dist/css/AdminLTE.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        缓存监控
    </h1>
    <ol class="breadcrumb">
        <li><i class="fa fa-home"></i> Home</li>
        <li>系统监控</li>
        <li>缓存监控</li>
    </ol>
</section>

<section class="content">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">缓存键</h3>
                <div class="box-tools pull-right">
                    <div class="input-group" style="width: 200px">
                        <input id="searchKeyValue" class="form-control">
                        <a href="javascript:searchByCondition()" class="input-group-addon btn"><i
                                class="fa fa-search"></i></a>
                    </div>
                </div>
            </div>
            <div class="box-body no-padding">
                <table id="cacheKey" class="table table-bordered table-hover no-header"></table>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">缓存子键</h3>
                <div class="box-tools pull-right">
                    <button onclick="removeMapKey()" type="button" class="btn btn-box-tool">
                        <i class="fa fa-remove"></i>
                    </button>
                </div>
            </div>
            <div class="box-body no-padding">
                <table id="cacheSonKey" class="table table-bordered table-hover no-header"></table>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">缓存内容</h3>
            </div>
            <div class="box-body no-padding">
                <textarea id="cackeValueTextarea" class="form-control"></textarea>
            </div>
        </div>
    </div>
</section>
<!-- jQuery 2.2.3 -->
<script src="../../plugins/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI -->
<script src="../../plugins/AdminLTE/plugins/jQueryUI/jquery-ui.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../plugins/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/AdminLTE/plugins/fastclick/fastclick.js"></script>
<!-- bootstrap table -->
<script src="../../plugins/AdminLTE/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../../plugins/AdminLTE/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!-- AdminLTE App -->
<script src="../../plugins/AdminLTE/dist/js/app.min.js"></script>
<script>
    var sonKey;
    $(window).resize(function () {
        textResize()
    });
    $(function () {
        textResize();

        $('#cacheKey').bootstrapTable({
            url: "/monitor/getCacheKeysByCond",
            queryParams: function (params) {
                return {
                    key: $("#searchKeyValue").val()
                }
            },
            responseHandler: function (data) {
                $('#cacheKey').find("thead").remove();
                return data.list;
            },
            cache: false,
            pagination: true,
            sidePagination: "client",
            pageNumber: 1,
            pageSize: 20,
            pageList: [10, 20, 30, 50, 100],
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            columns: [
                {
                    formatter: function (field, row, index) {
                        return row;
                    }
                }
            ],
            onClickRow: function (row, $element) {
                $("#cackeValueTextarea").val("");
                sonKey = row;
                $('#cacheSonKey').bootstrapTable("refresh");
                $element.addClass("info").siblings().removeClass("info");
            }
        });

        $('#cacheSonKey').bootstrapTable({
            url: "/monitor/getCacheSonKeys",
            queryParams: function (params) {
                return {
                    key: sonKey
                }
            },
            responseHandler: function (data) {
                $('#cacheSonKey').find("thead").remove();
                if (data.list.length == 1 && data.total == 0) {
                    $("#cackeValueTextarea").val(data.list[0]);
                    data.list = [];
                }
                return data.list;
            },
            cache: false,
            pagination: true,
            sidePagination: "client",
            pageNumber: 1,
            pageSize: 20,
            pageList: [10, 20, 30, 50, 100],
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            columns: [{
                formatter: function (field, row, index) {
                    return row;
                }
            }
            ],
            onClickRow: function (row, $element) {
                $element.addClass("info").siblings().removeClass("info");
                $.ajax({
                    type: "get",
                    data: {
                        mapKey: sonKey,
                        dataKey: row
                    },
                    url: "/monitor/getValueByKey",
                    success: function (result) {
                        $("#cackeValueTextarea").val(result);
                    }
                });
            }
        });

    })

    function removeMapKey() {
        var array = $('#cacheSonKey').find("tr[class='info']");
        if (array.length == 0) {
            parent.toastr.error("请选择要清除的行");
            return false;
        }
        $.ajax({
            type: "post",
            data: {
                mapKey: sonKey,
                dataKey: $(array).find("td").text()
            },
            url: "/monitor/removeMapKey",
            success: function (result) {
                if (result.success) {
                    parent.toastr.success("缓存清除成功");
                    $("#cackeValueTextarea").val("");
                    $('#cacheSonKey').bootstrapTable("refresh");
                } else {
                    parent.toastr.error(result.message);
                }
            }
        });
    }

    function searchByCondition() {
        $('#cacheKey').bootstrapTable("refresh");
    }

    function textResize() {
        $("#cackeValueTextarea").css("height", (parent.document.body.offsetHeight - 270) + "px");
    }
</script>
</body>
</html>
